<template>
	<div class="publicpageview">
		<div class="publicformview">
			<el-form :inline="true" :model="listQuery" size="mini" ref="searchForm" label-width="140px">
				<el-row :gutter="25">
					<el-col :span="5">
						<el-form-item label="区房屋管理单位：" prop="DID" label-width="140px">
							<el-select clearable v-model="listQuery.DID" @change='areaChange'>
								<div v-for="(item,index) in areaList" :key="index">
									<el-option :label="item.dname" :value="item.did" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="管理部(分中心)：" prop="manageDepartment" label-width="140px">
							<el-select clearable v-model="listQuery.manageDepartment" @change='HouseChange' value-key="aname">
								<div v-for="(item,index) in HouseList" :key="index">
					
									<el-option :label="item.aname" :value="item" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="管片：" prop="groupNew" label-width="140px">
							<el-select clearable v-model="listQuery.groupNew">
								<div v-for="(item,index) in guanpianList" :key="index">
									<el-option :label="item.groupnew" :value="item.groupnew" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="所号：" prop="blockno" label-width="140px">
							<el-input v-model="listQuery.blockno"></el-input>
						</el-form-item>
					</el-col>
					<!-- <div v-show="isSearch">
						
						<el-col :span="5">
							<el-form-item label="楼层：" prop="lc" label-width="140px">
								<el-input v-model="listQuery.lc"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="楼层：" prop="address" label-width="140px">
								<el-input v-model="listQuery.address"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="门号：" prop="menno" label-width="140px">
								<el-input v-model="listQuery.menno"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="日期：" prop="time">
								<el-date-picker style="width: 160px;" v-model="listQuery.time" type="date" placeholder="年/月/日">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</div> -->
					
					<el-col :span="4">
						
							<el-button size="mini" type="primary" @click="sumbitCx">查询</el-button>
							<el-button size="mini" @click="returns">重置</el-button>
								<el-button size="mini" type="primary"
									@click="isSearch = !isSearch">{{!isSearch?'高级搜索':'关闭搜索'}}</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div class="publitableview">
			<el-button type="primary" size="mini" @click="handleUpdate('',1)">导出</el-button>
			<el-table max-height='500px' v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">

				<el-table-column align="center" label="编号" prop="blockno">
				</el-table-column>
				
				<el-table-column align="center" label="门栋号" prop="buildingDoorNo">
				</el-table-column>
				
				<el-table-column align="center" label="楼层" prop="floorNo">
				</el-table-column>
				
				<el-table-column align="center" label="单元号" prop="apartmentNo">
				</el-table-column>
				
				<el-table-column align="center" label="间号" prop="roomNo">
				</el-table-column>
				
				<el-table-column align="center" label="总间数" prop="roomCount">
				</el-table-column>
				
				<el-table-column align="center" label="使用面积" prop="usingArea">
				</el-table-column>
				
				<el-table-column align="center" label="建筑面积" prop="buildingArea">
				</el-table-column>

				<el-table-column align="center" label="操作" width="280">
					<template slot-scope="scope">
						<el-button type="text" size="mini" @click="handleDayin(scope.row)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div class="publicpaginationview">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
			</div>
		</div>
		
		
		<el-dialog title="详情" :visible.sync="isXiangqing" width="70%" :before-close="handleClose" style="margin-top: 100px;">
			<el-table max-height='500px' v-loading="listLoading" :data="detailQuery" border fit highlight-current-row size="mini">
			
				<el-table-column align="center" label="档案编号" prop="blockno">
				</el-table-column>
				
				<el-table-column align="center" label="门栋号" prop="buildingDoorNo">
				</el-table-column>
				
				<el-table-column align="center" label="楼层" prop="floorNo">
				</el-table-column>
				
				<el-table-column align="center" label="单元号" prop="apartmentNo">
				</el-table-column>
				
				<el-table-column align="center" label="间号" prop="roomNo">
				</el-table-column>
				
				<el-table-column align="center" label="总间数" prop="roomCount">
				</el-table-column>
				
				<el-table-column align="center" label="使用面积" prop="usingArea">
				</el-table-column>
				
				<el-table-column align="center" label="建筑面积" prop="buildingArea">
				</el-table-column>
			</el-table>
			<div style="height: 40px;"></div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getArea,
		blockGroupList,
		getHouseAdmin,
		unitPageData
	} from '@/api/industry'
	export default {
		name: "AccommodationManagementGonglingguanli",

		data() {
			return {
				listQuery: {
					DID:'',
					AID:'',
					groupNew:'',
					blockno:'',
					pageNum: 1,
					pageSize: 20,
					manageDepartment:''
				},
				total: 0,
				options: [{
					key: "1"
				}],
				list: [],
				listLoading: false,
				formData: {
					userId: "",
					userName: "",
					phone: "",
					deptId: "",
					roleId: "",
					userStatus: "1",
					remarks: "",
				},
				type: '',
				value1:'',
				isSearch:false,
				detailQuery:[],
				isXiangqing:false,
				// 区房屋管理单位
				areaList: [],
				// 根据区获取部门
				HouseList: [],
				// 管片列表
				guanpianList: [],
			};
		},

		computed: {
			deptName() {
				return (val) => {
					if (val == "1") {
						return "事业部";
					}
					return "生活部";
				};
			},
		},

		mounted() {
			this.total = this.list.length;
			this.getArea()
			this.blockGroupList()
			// this.unitPageData()
		},

		methods: {
			// 查询
			sumbitCx() {
				// this.unitPageData()
			},
			returns(){
				this.listQuery.DID='',
				this.listQuery.AID='',
				this.listQuery.groupNew='',
				this.listQuery.blockno='',
				this.listQuery.pageNum= 1,
				this.listQuery.pageSize= 20,
				this.listQuery.manageDepartment=''
				this.listQuery.areaUnit = ''
			},
			unitPageData(){
				let data = this.listQuery
				this.listLoading = true;
				unitPageData(data).then(res => {
					this.list = res.data.list
					this.listLoading = false;
				})
			},
			// 选择区房屋管理
			areaChange(e) {
				if(e){
					this.listQuery.areaUnit = e
					this.getHouseAdmin(e)
				}
					this.listQuery.manageDepartment = ''
					this.listQuery.AID = ''
			},
			// 根据区获取部门
			HouseChange(e) {
				console.log(e)
				this.listQuery.manageDepartment = e.aname
				this.listQuery.AID = e.aid
			},
			
			getArea() {
				getArea().then(res => {
					console.log(res)
					this.areaList = res.data
				})
			},
			getHouseAdmin(e) {
				getHouseAdmin({
					DID: e
				}).then(res => {
					this.HouseList = res.data
				})
			},
			
			// 管片列表
			blockGroupList() {
				let data = {
					group: '',
					groupNumber: '',
					houseAdmin: '',
					pageNum: '',
					pageSize: 99999
				}
				this.listLoading = true;
				blockGroupList(data).then(res => {
					this.guanpianList = res.data.list
					this.listLoading = false;
					// this.houseAdminList()
				})
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.unitPageData();
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.unitPageData();
			},
			getList() {
				this.listLoading = true;
				newsPage(this.listQuery).then((response) => {
					this.total = response.data.total;
					this.list = response.data.list;
					this.listLoading = false;
				});
			},

			resetForm(val) {
				console.log("1");
				this.$refs[val].resetFields();
			},

			handleAddUser() {
				this.$router.push('chanquanziliaoluru')
			},
			handleUpdate(currentData, type) {
				//   一定要在打开弹窗前 再赋值 不然resetFiles没用
				this.type = type
				this.dialogVisible = true;
				this.$nextTick(() => {
					this.formData = {
						...currentData
					};
				});
			},
			handleDayin(row) {
				let list = []
				list.push(row)
				this.detailQuery = list
				this.isXiangqing = true
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then((_) => {
						done()
					})
					.catch((_) => {})
			},
		},
	};
</script>
<style scoped>
	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	.title {
		color: #008C93;
		text-align: center;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.headButton {
		width: 100%;
		display: flex;
		justify-content: end;
	}

	.title2 {
		color: #008C93;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.tianjiaButton {
		border: 2px solid #008C93;
		background-color: #fff;
		color: #008C93;
	}

	.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 150px;
	}
	/deep/.el-input__inner {
		width: 160px;
	}
	/deep/.publicpaginationview .el-input__inner{
		width: 100px;
	}
	/deep/.publicpaginationview .is-in-pagination .el-input__inner{
		width: 50px;
	}
</style>